<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Form API</title>
</head>
<body>
<form action="#">
    年龄: <input type="range" min="18" max="88" id="age"><span id="ageSpan"></span><p></p>
    请选择日期: <input type="date"><br/>
    姓名: <input type="text" autofocus placeholder="请输入姓名" required><br/>
    <input type="submit" value="提交">
</form>
<datalist id="namelist">
    <option >蒋正午</option>
    <option value="2">蒋欣</option>
    <option value="3">郑成功</option>
</datalist>
<input type="text" list="namelist">
<script type="text/javascript">

    window.onload = function () {

        document.querySelector("#age").addEventListener("change", function (e) {

            document.querySelector("#ageSpan").innerHTML = "年龄为:" + this.value;

        }, false);

    }

</script>

</body>
</html>